<style lang="scss" scoped>

@import '../../style/mixin';
#shop {
    padding-top: 1.95rem;
    p,
    span,
    input {
        font-family: Helvetica Neue, Tahoma, Arial;
    }
}

//
// .menu {
//     position: relative;
//     display: inline-block;
//     margin: 0;
//     padding-left: 0;
//     background-color: #ebedef;
//     width: 100%;
//     &:before {
//         display: table;
//         content: "";
//     }
//     li {
//         list-style: none;
//     }
//     .is-opened .icon-arrow {
//         transform: rotate(180deg);
//     }
//     .secondUl {
//         display: none;
//     }
//     .sub-menu.is-opened {
//         .secondUl {
//             display: block;
//         }
//     }
//     .sub-menu {
//         .submenu-title {
//             position: relative;
//             height: 2rem;
//             line-height: 2rem;
//             font-size: 0.7rem;
//             color: #48576a;
//             padding: 0 1rem;
//             cursor: pointer;
//             position: relative;
//             transition: border-color .3s, background-color .3s, color .3s;
//             box-sizing: border-box;
//             white-space: nowrap;
//             .icon-arrow {
//                 position: absolute;
//                 right: 0.5rem;
//                 top: 0.6rem;
//                 z-index: 1;
//                 @include wh(0.7rem, 0.7rem);
//             }
//         }
//         [class*=" el-icon-"] {
//             font-family: element-icons!important;
//             speak: none;
//             font-style: normal;
//             font-weight: 400;
//             font-variant: normal;
//             text-transform: none;
//             line-height: 1;
//             vertical-align: baseline;
//             display: inline-block;
//             -webkit-font-smoothing: antialiased;
//             -moz-osx-font-smoothing: grayscale;
//         }
//         .menu-item-group-title {
//             padding: 0 1rem 0 1.5rem;
//         }
//         .children-item {
//             position: relative;
//             height: 2rem;
//             line-height: 2rem;
//             font-size: 0.7rem;
//             color: #48576a;
//             padding: 0 1rem;
//             cursor: pointer;
//             position: relative;
//             transition: border-color .3s, background-color .3s, color .3s;
//             box-sizing: border-box;
//             white-space: nowrap;
//         }
//         .menu-item-group >ul {
//             padding-left: 1.3rem;
//         }
//     }
// }
.sidebar-menu .menu {
    background-color: #e4e8f1;
}

.shop_container {
    padding-top: 1.95rem;
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    left: 0;
    height: 100%;
}

.food_container {
    display: flex;
    flex: 1;
    padding-bottom: 2rem;
}

.menu_container {
    display: flex;
    flex: 1;
    overflow-y: hidden;
    position: relative;
    .menu_left {
        background-color: #f8f8f8;
        width: 3.8rem;
        overflow: scroll;
        .menu {
            position: relative;
            display: inline-block;
            margin: 0;
            padding-left: 0;
            background-color: #ebedef;
            width: 100%;
            overflow: hidden;
            &:before {
                display: table;
                content: "";
            }
            li {
                list-style: none;
            }
            .is-opened .icon-arrow {
                transform: rotate(180deg);
            }
            .secondUl {
                display: none;
            }
            .sub-menu.is-opened {
                .secondUl {
                    display: block;
                }
            }
            .sub-menu {
                .submenu-title {
                    position: relative;
                    height: 1rem;
                    line-height: 1rem;
                    @include sc(.4rem, #666);
                    padding: 0 0.2rem;
                    cursor: pointer;
                    position: relative;
                    transition: border-color .3s, background-color .3s, color .3s;
                    box-sizing: border-box;
                    white-space: nowrap;
                    .icon-arrow {
                        position: absolute;
                        right: 0.5rem;
                        top: 0.6rem;
                        z-index: 1;
                        @include wh(0.3rem, 0.3rem);
                    }
                }
                [class*=" el-icon-"] {
                    font-family: element-icons!important;
                    speak: none;
                    font-style: normal;
                    font-weight: 400;
                    font-variant: normal;
                    text-transform: none;
                    line-height: 1;
                    vertical-align: baseline;
                    display: inline-block;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }
                .menu-item-group-title {
                    padding: 0 0.3rem 0 0.5rem;
                }
                .children-item {
                    padding-left: 0.7rem;
                }
                // .menu-item-group >.secondUl {
                //     // padding-left: 1rem;
                // }
            }
        }
    }
    .menu_right {
        flex: 4;
        overflow-y: auto;
        .menu_detail_list {
            background-color: #fff;
            padding: .6rem .4rem;
            border-bottom: 1px solid #f8f8f8;
            position: relative;
            overflow: hidden;
            .menu_detail_link {
                display: flex;
                .menu_food_img {
                    margin-right: .4rem;
                    img {
                        @include wh(2rem, 2rem);
                        display: block;
                    }
                }
                .menu_food_description {
                    width: 100%;
                    .food_description_head {
                        line-height: 0.7rem;
                        overflow: hidden;
                        .description_foodname {
                            @include sc(.7rem, #333);
                        }
                    }
                    .food_price_num {
                        @include fj;
                        .food_price {
                            span {
                                font-family: 'Helvetica Neue', Tahoma, Arial;
                            }
                            span:nth-of-type(1) {
                                @include sc(.6rem, #f60);
                                margin-right: .08rem;
                            }
                            span:nth-of-type(2) {
                                @include sc(.7rem, #f60);
                                font-weight: bold;
                                margin-right: .2rem;
                            }
                        }
                    }
                    .buy-cart{
                      .price-icon{
                        position: relative;
                        top: 0.16rem;
                        img{
                          @include wh(0.8rem, 0.8rem);
                        }
                      }
                    }
                    .cart_num{
                      font-size: .65rem;
                      color: #666;
                      min-width: 1rem;
                      text-align: center;
                      font-family: Helvetica Neue,Tahoma;
                    }
                }
            }
        }
    }
}


        position: absolute;
        background-color: #3d3d3f;
        bottom: 0;
        left: 0;
        z-index: 13;
        display: flex;
        @include wh(100%, 2rem);
        .cart_icon_num{
            flex: 1;
            .cart_icon_container{
                display: flex;
                background-color: #3d3d3f;
                position: absolute;
                padding: .4rem;
                border: 0.18rem solid #444;
                border-radius: 50%;
                left: .5rem;
                top: -.7rem;
                .cart_icon{
                    @include wh(1.2rem, 1.2rem);
                }
                .cart_list_length{
                    position: absolute;
                    top: -.25rem;
                    right: -.25rem;
                    background-color: #ff461d;
                    line-height: .7rem;
                    text-align: center;
                    border-radius: 50%;
                    border: 0.025rem solid #ff461d;
                    min-width: .7rem;
                    height: .7rem;
                    @include sc(.5rem, #fff);
                    font-family: Helvetica Neue,Tahoma,Arial;
                }
            }
            .move_in_cart{
                animation: mymove .5s ease-in-out;
            }
            .cart_icon_activity{
                 background-color: #3190e8;
            }
            .cart_num{
                @include ct;
                left: 3.5rem;

                div{
                    color: #fff;
                }
                div:nth-of-type(1){
                    font-size: .8rem;
                    font-weight: bold;
                    margin-bottom: .1rem;
                }
                div:nth-of-type(2){
                    font-size: .4rem;
                }
            }
        }
        .gotopay{
            position: absolute;
            right: 0;
            background-color: #535356;
            @include wh(5rem, 100%);
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            .gotopay_button_style{
                @include sc(.7rem, #fff);
                font-weight: bold;
            }
        }
        .gotopay_acitvity{
            background-color: #4cd964;
        }
    }

</style>

<template lang="html">

<div class="">
    <head-top :head-title="'点菜'" goBack="true"></head-top>
    <section class="shop_container">
        <section class="food_container">
            <section class="menu_container">
                <section class="menu_left" id="wrapper_menu" ref="wrapperMenu">
                    <ul class="sidebar-menu menu firstUl">
                        <li class="sub-menu is-opened" v-for="(item,index) in listDatas" :key="index">
                            <div class="submenu-title">
                                <span v-if="item.noDropdown==false">
                                {{item.name}}
                            </span>
                                <span v-else>
                                <span @click="handlerFoodDtails(item)">{{item.name}}</span>
                                </span>
                            </div>
                            <ul class="menu secondUl">
                                <li class="menu-item-group" v-for="(list,index) in item.sonList" :key="index">
                                    <div class="submenu-title menu-item-group-title">{{list.name}}</div>
                                    <ul class="threeUl">
                                        <li class="submenu-title children-item" v-for="(li,index) in list.sonList">{{li.name}}</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </section>
                <section class="menu_right">
                    <section class="menu_detail_list" v-for="(foods,foodindex) in foodsList" :key="foodindex">
                        <div class="menu_detail_link">
                            <section class="menu_food_img">
                                <img :src="foods.image">
                            </section>
                            <section class="menu_food_description">
                                <h3 class="food_description_head">
                                            <strong class="description_foodname">{{foods.foodName}}</strong>
                                        </h3>
                                <section class="food_price_num">
                                    <section class="food_price">
                                        <span>¥</span><span>{{foods.price}}</span>
                                    </section>
                                      <buy-cart :foodsList='foodsList' :shopId='shopId' :foods='foods'></buy-cart>
                                </section>
                            </section>
                        </div>
                    </section>
                </section>
            </section>
            <section class="buy_cart_container">
                <section  class="cart_icon_num">
                    <div class="cart_icon_container"  ref="cartContainer">


                    </div>
                    <div class="cart_num">
                        <div>¥ {{totalPrice}}</div>
                    </div>
                </section>
                <section class="gotopay">
                    <router-link :to="{path:'/confirmOrder', query:{geohash, shopId}}" >去结算</router-link>
                </section>
            </section>
        </section>

    </section>
</div>

<!-- <div id="shop">
    <head-top :head-title="'点菜'" goBack="true"></head-top>
    <section class="shop-sidebar">
        <ul class="sidebar-menu menu firstUl">
            <li class="sub-menu is-opened" v-for="(item,index) in listDatas" :key="index">
                <div class="submenu-title">

                    <span v-if="item.noDropdown==false">
                        {{item.name}}
                    </span>
                    <span v-else>
                        <router-link :to="'/food/'+item.id">{{item.name}}</router-link>
                    </span>
                    <span v-if="item.noDropdown==false"><img class="icon-arrow" src="../../assets/images/arrow.png" alt=""></span>
                </div>
                <ul class="menu secondUl">
                  <li class="menu-item-group" v-for="(list,index) in item.sonList" :key="index">
                    <div class="submenu-title menu-item-group-title">
                        {{list.name}}
                    </div>
                    <ul class="menu threeUl">
                      <li class="children-item" v-for="(li,index) in list.sonList">{{li.name}}</li>
                    </ul>
                  </li>
                </ul>
            </li>
        </ul>
    </section>

</div> -->

</template>

<script>

import headTop from '../../components/header/head'
import buyCart from '../../components/common/buyCart'
import { mapState,mapMutations} from 'vuex'
export default {
    components: {
        headTop,
        buyCart
    },
    data() {
        return {
            shopId: null, // 餐桌号
            isOpen: false,
            listDatas: [{
                'name': '类别1',
                'id': '1',
                'noDropdown': false,
                'sonList': [{
                    'name': '类别1-1',
                    'id': '2',
                    'noDropdown': false,
                    'sonList': [{
                        'name': '类别1-1-1',
                        'id': '3',
                        'noDropdown': true
                    }]
                }]
            }, {
                'name': '类别2',
                'id': '11',
                'noDropdown': false,
                'sonList': [{
                    'name': '类别2-1',
                    'id': '22',
                    'noDropdown': false,
                    'sonList': [{
                        'name': '类别2-1-1',
                        'id': '33',
                        'noDropdown': true
                    }]
                }]
            }, {
                'name': '类别3',
                'id': '11',
                'noDropdown': true
            }, {
                'name': '类别3',
                'id': '11',
                'noDropdown': true
            }, {
                'name': '类别3',
                'id': '11',
                'noDropdown': true
            }, {
                'name': '类别3',
                'id': '11',
                'noDropdown': true
            }, {
                'name': '类别3',
                'id': '11',
                'noDropdown': true
            }, {
                'name': '类别3',
                'id': '11',
                'noDropdown': true
            }, {
                'name': '类别3',
                'id': '11',
                'noDropdown': true
            }, ],
            foodsList: [{
                "description": "你个菜",
                "type": 1,
                "foodTastes": null,
                "foodName": "鱼香肉丝",
                "foodType": 14,
                "image": "sfsfl.jpg",
                "price": 14,
                "disCountPrice": 12,
                "other": "不知道",
                "id": 1
            }, {
                "description": "菜鸟",
                "type": 1,
                "foodTastes": null,
                "foodName": "宫保鸡丁",
                "foodType": 14,
                "image": "sdf.jpg",
                "price": 35,
                "disCountPrice": 23,
                "other": "其他",
                "id": 2
            },{
                "description": "菜鸟",
                "type": 1,
                "foodTastes": null,
                "foodName": "土豆丝",
                "foodType": 14,
                "image": "sdf.jpg",
                "price": 35,
                "disCountPrice": 23,
                "other": "其他",
                "id": 3
            },{
                "description": "菜鸟",
                "type": 1,
                "foodTastes": null,
                "foodName": "米饭",
                "foodType": 14,
                "image": "sdf.jpg",
                "price": 35,
                "disCountPrice": 23,
                "other": "其他",
                "id": 4
            }]
        }
    },
    created() {
      this.shopId = this.$route.params.id
      this.INIT_BUYCART()
    },
    async beforeMount() {

    },
    computed: {

    },
    mounted() {

    },
    methods: {
      ...mapMutations([
        'INIT_BUYCART'
      ])
    }
}

</script>
